<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .box {
      width: 900px;
      height: 250px;
      background-color: skyblue;
      margin: 100px auto;
    }

    .header {
      height: 40px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .header li {
      float: left;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding: 0 20px;
      cursor: pointer;

    }

    .header .current {
      color: white;
      background-color: #c81623;
    }

    .item {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="header">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">
        商品介绍模块内容
      </div>
      <div class="item">
        规格与包装模块内容
      </div>
      <div class="item">
        售后保障模块内容
      </div>
      <div class="item">
        商品评价（50000）模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>
    </div>
    <script>
      var header = document.querySelector('.header');
      var lis = header.querySelectorAll('li');
      var items = document.querySelectorAll('.item');
      // for循环绑定点击事件
      for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i); // 给五个 li 设置索引号
        lis[i].onclick = function () {
          // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

          // 干掉所有人 其余的li清除 class 这个类
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
          }
          this.className = 'current';
          // 2. 下面的显示内容模块
          var index = this.getAttribute('index');
          // 干掉所有人 让其余的item 这些div 隐藏
          for (var i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
          }
          // 留下我自己 让对应的item 显示出来
          items[index].style.display = 'block';
        }
      }
    </script>
</body>

</html>